<template>
    <div class="login">
        <div class="login-c">
            <!-- 邮箱正常登录页面 -->
            <div class="login-d" v-if="setup == 1">
                <div class="img-c">
                    <img class="imgsss" src="@/assets/icon/login/logo.png" alt="" />
                    <!-- 首屏邮箱登录 -->
                    <div class="email">
                        <div class="email-c">
                            Welcome Back! Enter Your Register Email & Password
                        </div>

                        <!-- <div class="hr">
                            <hr class="hr-c" />
                            <div class="txt">or continue with</div>
                            <hr class="hr-c" />
                        </div> -->
                        <!-- 登录切换 -->
                        <!-- <div class="logs">
                            <el-button plain class="log-c" autofocus @click="emails(1)">
                                <div class="log-d">
                                    <img class="imgs" src="@/assets/icon/login/email.png" alt="" />
                                    <span class="contxts" v-if="colorshow"> Email</span>
                                    <span class="contxt" v-else> Email</span>
                                </div>
                            </el-button>
                            <el-button plain class="log-c" @click="emails(2)">
                                <div class="log-d">
                                    <img class="imgs" src="@/assets/icon/login/wallet.png" alt="" />
                                    <span class="contxts" v-if="colorshows"> Wallet</span>
                                    <span class="contxt" v-else> Wallet</span>
                                </div>
                            </el-button>
                        </div> -->
                        <el-form :rules="rules">
                            <el-input placeholder="Email" v-model="username" clearable></el-input>
                            <el-input
                                placeholder="请输入密码"
                                v-model="password"
                                show-password
                                @keyup.enter.native="logins"
                            ></el-input>
                        </el-form>
                        <div class="tabfoot">
                            <el-checkbox v-model="checked">Keep me logged in</el-checkbox>
                            <span class="forgot" @click="forgot()">Forgot Password</span>
                        </div>
                        <div></div>
                    </div>
                    <el-button v-if="setup == 1" type="primary" class="log" @click="logins()"
                        >LOG IN</el-button
                    >
                    <div class="register" v-if="setup == 1">
                        <span>Don't have an account?</span>
                        <span @click="registers()">Register</span>
                    </div>
                </div>
            </div>
            <!-- 邮箱注册 -->
            <el-form class="regter-c" v-if="setup == 2">
                <div class="regter">
                    <img class="imga" src="@/assets/icon/login/logo.png" alt="" />
                    <div class="accout">Registered account</div>
                    <el-input
                        placeholder="请输入邮箱"
                        v-model="register.email"
                        clearable
                    ></el-input>

                    <el-input
                        placeholder="请输入手机号"
                        v-model="register.tell"
                        prop="tel"
                        clearable
                    ></el-input>
                    <el-input
                        placeholder="请设置密码"
                        v-model="register.password"
                        clearable
                        show-password
                    ></el-input>
                    <el-input
                        placeholder="请再次确认密码"
                        v-model="register.password_confirmation"
                        clearable
                        show-password
                    ></el-input>
                    <div class="emilVerify">
                        <el-input class="yanzheng" placeholder="请输入验证码" v-model="register.yz">
                        </el-input>
                        <el-button
                            type="primary"
                            @click="sendEmilea"
                            class="btn"
                            v-html="sendEmile"
                            :disabled="yzBool"
                            >发送验证码</el-button
                        >
                    </div>
                    <el-checkbox v-model="tickChecked"
                        >同意<a href="" class="clause">《服务条款》</a>、<a href="" class="clause"
                            >《隐私条款》</a
                        >和<a href="" class="clause">《同意推广信息》</a>
                    </el-checkbox>
                    <el-button type="primary" class="log" @click="logins()">Registered</el-button>
                </div>
            </el-form>

            <!-- 忘记密码 -->
            <div class="regter-c" v-if="setup == 3">
                <div class="regter">
                    <img class="imga" src="@/assets/icon/login/logo.png" alt="" />
                    <div class="accout">Forgot password</div>
                    <el-input
                        placeholder="Please enter email"
                        v-model="forget.email"
                        clearable
                    ></el-input>
                    <el-input
                        placeholder="Please enter a new password"
                        v-model="forget.password"
                        clearable
                        show-password
                    ></el-input>
                    <el-input
                        placeholder="Please confirm the new password again"
                        v-model="forget.password_confirmation"
                        clearable
                        show-password
                    ></el-input>
                    <el-button type="primary" class="log" @click="logins()">LOG IN</el-button>
                </div>
            </div>
            <!-- 钱包登录页面 -->
            <div class="login_email" v-if="setup == 4">
                <h3 class="money_title">Select Wallet Login</h3>
                <div class="money_content">
                    <!-- <el-button type="plain" class="butt">主要按钮</el-button> -->
                    <div class="money-bg">
                        <div class="metamsk" @click="walletLogin('metamask')">
                            <div class="item_left">
                                <img src="@/assets/icon/login/metamask.webp" class="imgs" alt="" />
                                <span class="metamsk-text">MetaMask</span>
                            </div>
                            <button class="money_btn1">Popular</button>
                        </div>
                    </div>
                    <!-- <div class="money-bg metamsk-bor">
                        <div class="metamsk" @click="walletLogin('walletconnect')">
                            <div class="item_left">
                                <img
                                    src="@/assets/icon/login/walletconnect.webp"
                                    class="imgs"
                                    alt=""
                                />
                                <span class="metamsk-text">WalletConnect</span>
                            </div>
                           
                        </div>
                    </div> -->

                    <div class="money-bg metamsk-bor">
                        <div class="metamsk" @click="walletLogin('Coinbase')">
                            <div class="item_left">
                                <img
                                    src="@/assets/icon/login/walletlink.webp"
                                    class="imgs"
                                    alt=""
                                />
                                <span class="metamsk-text">Coinbase Wallet</span>
                            </div>
                        </div>
                    </div>
                    <div class="money-bg metamsk-bor">
                        <div class="metamsk" @click="walletLogin('Kaikas')">
                            <div class="item_left">
                                <img
                                    src="@/assets/icon/login/kaikas-alternative.webp"
                                    class="imgs"
                                    alt=""
                                />
                                <span class="metamsk-text">kaikas Wallet</span>
                            </div>
                            <!-- <button class="money_btn2">Solana</button> -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- 登录切换 -->
        </div>
    </div>
</template>

<script>
import { Message } from "element-ui";
import http from "@/http/index.js";
import { setToken, setUserInfo, setWallet } from "@/utils/myauth.js";
// import contract from "@/utils/contract/index.js";
const Base64 = require("js-base64").Base64; //导入base64编码解码
// import { ethers } from "ethers";
export default {
    data() {
        return {
            yzBool: false,
            sendEmile: "发送验证码",
            checked: false,
            tickChecked: false,
            username: "",
            password: "",
            setup: 1, //切换步骤
            colorshow: true, //字体颜色切换
            colorshows: true, //字体颜色切换

            //登录校验
            rules: {
                username: {
                    rule: /\S/,
                    msg: "邮箱不能为空",
                },
                password: {
                    rule: /^[0-9a-zA-z]{6,16}$/,
                    msg: "密码应该为6-16位字符",
                },
            },
            // 注册
            register: {
                yz: "",
                email: "",
                password: "",
                password_confirmation: "",
                tell: "",
            },

            // 忘记密码
            forget: {
                email: "", //暂时接口只有邮箱参数
                password: "",
                password_confirmation: "",
            },
            //钱包登录数据
            walletData: {
                randomToken: "",
                signature: "",
            },
        };
    },
    methods: {
        // 邮箱验证
        sendEmilea() {
            if ((this.sendEmile = "发送验证码")) {
                this.yzBool = true;
                this.sendEmile = 3;
                let set = setInterval(() => {
                    this.sendEmile--;

                    if (this.sendEmile == 0) {
                        clearInterval(set);
                        this.sendEmile = "发送验证码";
                        this.yzBool = false;
                    }
                }, 1000);
            }
            http.authcode({
                mobile: this.register.tell,
            });
        },
        // 注册按钮
        // registerOver(){
        //     if(this.tel==''||this.tel.length!=11){
        //        this.$message({
        //         message: '请输入正确的手机号',
        //         type: 'warning'
        //      });
        //     } else {
        //        this.logins()
        //     }
        // },

        // 邮箱注册
        registers() {
            this.setup = 2;
        },
        //忘记密码
        forgot() {
            this.setup = 3;
        },
        //切换登录
        emails(item) {
            if (item == 1) {
                this.setup = 1;
                this.colorshow = false;
                this.colorshows = true;
            } else if (item == 2) {
                this.setup = 4;
                this.colorshows = false;
                this.colorshow = true;
            }
            // console.log(this.setup);
        },
        // 邮箱登录
        logins() {
            /* ------ 用户点击记住账号密码的存储 ------ */
            if (this.checked) {
                let password = Base64.encode(this.password); // base64加密
                localStorage.setItem("userId", this.username);
                localStorage.setItem("password", password);
            } else {
                localStorage.removeItem("userId");
                localStorage.removeItem("password");
            }
            /* ------ http登录请求 ------ */
            if (this.setup == 1) {
                //正常登录
                // 登录请求
                http.login({
                    email: this.username,
                    password: this.password,
                }).then((res) => {
                    // console.log(res);
                    setToken("Bearer " + res.data.token); //存储token
                    http.detail().then((res) => {
                        setUserInfo(res.data); //存储个人信息
                    });
                    const enterPath = this.$route.query.enterPath;
                    if (enterPath) {
                        this.$router.push(enterPath);
                    } else {
                        this.$router.push("/");
                    }
                });
            } else if (this.setup == 2) {
                //注册邮箱
                console.log();
                if (this.tel == "" || this.register.tell.length != 11) {
                    console.log(this.tickChecked);
                    this.$message({
                        message: "请输入正确的手机号",
                        type: "warning",
                    });
                } else if (!this.register.yz) {
                    this.$message({
                        message: "请输入验证码",
                        type: "warning",
                    });
                } else if (this.tickChecked == false) {
                    this.$message({
                        message: "请勾选服务条款",
                        type: "warning",
                    });
                } else {
                    http.register({
                        code: this.register.yz,
                        email: this.register.email,
                        password: this.register.password,
                        password_confirmation: this.register.password_confirmation,
                        mobile: this.register.tell,
                    }).then((res) => {
                        console.log(res);
                        this.setup = 1;
                    });
                }
            } else if (this.setup == 3) {
                //忘记密码
                http.forgetAPI({
                    email: this.forget.email,
                }).then((res) => {
                    // console.log(res);
                    this.setup = 1;
                });
            }
        },
        //判断验证是否符合要求
        validate(key) {
            let bool = true;
            if (!this.rules[key].rule.test(this[key])) {
                Message({
                    message: this.rules[key].msg,
                    type: "error",
                    duration: 5 * 1000,
                });
                bool = false;
                return false;
            }
            return bool;
        },
        //钱包登录
        async walletLogin(type) {
            let that = this;
            if (type == "metamask") {
                http.getWalletSign().then((res) => {
                    //获取钱包签名
                    if (res.status == 200) {
                        this.walletData = res.data;
                        // return;
                        contract.autograph(this.walletData.signature).then((res_wallet) => {
                            if (res_wallet) {
                                //钱包登录
                                http.walletLogin({
                                    provider: 1,
                                    address: res_wallet.signerAddress,
                                    signature: res_wallet.signature,
                                    randomToken: that.walletData.randomToken,
                                }).then((res_login) => {
                                    if (res_login.status == 200 || res_login.status == 201) {
                                        setToken("Bearer " + res_login.data.token); //存储token
                                        //请求获取个人信息
                                        http.detail().then((res) => {
                                            setUserInfo(res.data); //存储个人信息
                                        });
                                        //存储钱包地址
                                        setWallet(res_wallet.signerAddress);
                                        const enterPath = this.$route.query.enterPath;
                                        if (enterPath) {
                                            this.$router.push(enterPath);
                                        } else {
                                            this.$router.push("/");
                                        }
                                    }
                                    // console.log(res_login);
                                });
                            }
                        });
                    }
                });
            }
            // if (type == "walletconnect") {
            //     contract.connectWallet();
            // }
            if (type == "Coinbase") {
                contract.connectCoinbase().then((res) => {
                    http.walletLogin({
                        provider: 3,
                        address: res[0],
                    }).then((res_login) => {
                        if (res_login.status == 200 || res_login.status == 201) {
                            setToken("Bearer " + res_login.data.token.plainTextToken); //存储token
                            http.detail().then((res) => {
                                setUserInfo(res.data); //存储个人信息
                            });

                            //存储钱包地址
                            setWallet(res[0]);
                            const enterPath = this.$route.query.enterPath;
                            if (enterPath) {
                                this.$router.push(enterPath);
                            } else {
                                this.$router.push("/");
                            }
                        }
                    });
                });
            }
            if (type == "Kaikas") {
                // console.log("Kaikas");
                if (typeof window.klaytn == 'undefined') {
                    //没安装MetaMask钱包进行弹框提示
                    alert("请安装klaytn!");
                } else {
                     const provider = window['klaytn']
                }
                // 调起钱包登录
                try {
                    const accounts = await klaytn.enable();
                    //存储钱包地址
                    setWallet(accounts[0]);
                    // console.log(accounts);
                    // 登录
                    http.walletLogin({
                        provider: 4,
                        address: accounts[0],
                    }).then((res_login) => {
                        if (res_login.status == 200 || res_login.status == 201) {
                            setToken("Bearer " + res_login.data.token); //存储token
                            //请求获取个人信息
                            http.detail().then((res) => {
                                setUserInfo(res.data); //存储个人信息
                            });
                            const enterPath = this.$route.query.enterPath;
                            if (enterPath) {
                                this.$router.push(enterPath);
                            } else {
                                this.$router.push("/");
                            }
                        }
                    });
                } catch (error) {
                    // Handle error. Likely the user rejected the login
                    console.error(error);
                }
            }
        },
    },
    computed: {},
    created() {
        // this.colorshow = false;
        // // console.log(this.$route.query);
        // if (this.$route.query.type == 9) {
        //     this.setup = 2;
        // }
    },
    mounted() {
        // if (this.$route.query.type == "wallet") {
        //     this.setup = 4;
        // }
        // let username = localStorage.getItem("userId");
        // if (username) {
        //     this.username = localStorage.getItem("userId");
        //     this.password = Base64.decode(localStorage.getItem("password")); // base64解密
        //     this.checked = true;
        // }
    },
};
</script>

<style scoped lang="scss">
.login {
    width: 100%;
    height: 100vh;
    .login-c {
        position: relative;
        width: 100%;
        height: 100%;
        background: url(@/assets/icon/login/bg.jpg) no-repeat;
        background-size: cover;
        .login-d {
            position: absolute;
            width: 551px;
            height: 500px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ffffff;
            border-radius: 10px;
            .img-c {
                width: 376px;
                margin: 0 auto;
                height: 37px;

                .imgsss {
                    display: block;
                    width: 132px;
                    height: 37px;
                    margin: 39px auto 19px; //暂时调整样式,登录样式暂未确定
                    //margin: 70px auto 100px;
                }
                .el-input {
                    margin-bottom: 15px;
                }
                .tabfoot {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    cursor: pointer;
                    margin-bottom: 16px;
                    .forgot {
                        font-style: normal;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 21px;
                        letter-spacing: 0.05em;
                        color: #3a3a3a;
                    }
                }
                .log {
                    width: 100%;
                    margin-top: 33px;
                }
                .register {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 27px;
                    cursor: pointer;
                    :nth-child(1) {
                        font-style: normal;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 24px;
                        letter-spacing: 0.05em;
                        color: #999898;
                    }
                    :nth-child(2) {
                        font-style: normal;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 24px;
                        letter-spacing: 0.05em;
                        color: #3a3a3a;
                    }
                }
            }
            .email {
                .email-c {
                    width: 357px;
                    margin-top: 19px;
                    margin-bottom: 24px;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 21px;
                    color: #999898;
                    text-align: center;
                }
                .hr {
                    display: flex;
                    align-items: center;
                    margin-bottom: 17px;
                    .hr-c {
                        width: 109px;
                        border: 1px solid #e7e7e7;
                    }
                    .txt {
                        font-style: normal;
                        font-weight: 400;
                        font-size: 16px;
                        line-height: 24px;
                        letter-spacing: 0.05em;
                        color: #999898;
                        margin: 0px 8px;
                    }
                }
                .logs {
                    display: flex;
                    align-items: center;
                    margin-bottom: 28px;
                    .log-c {
                        display: flex;
                        align-items: center;
                        width: 180px;
                        height: 48px;
                    }
                    .log-d {
                        display: flex;
                        align-items: center;
                        margin-left: 20px;
                        margin-right: 40px;
                    }
                    .imgs {
                        width: 33px;
                        height: 33px;
                        display: inline-block;
                        margin-right: 10px;
                    }
                    .contxt {
                        display: inline-block;
                        font-style: normal;
                        font-weight: 500;
                        font-size: 20px;
                        line-height: 30px;
                        color: #3a3a3a;
                    }
                    .contxts {
                        font-style: normal;
                        font-weight: 400;
                        font-size: 20px;
                        line-height: 30px;
                        color: #8e959b;
                    }
                }
            }
        }
        .login-ss {
            height: 500px !important;
        }
        .regter-c {
            position: absolute;
            width: 551px;
            height: 520px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ffffff;
            border-radius: 10px;
            .regter {
                width: 376px;
                margin: 0 auto;
                height: 37px;
                .imga {
                    display: block;
                    width: 132px;
                    height: 37px;
                    margin: 24px auto 13px;
                }
                .el-input {
                    margin-bottom: 15px;
                    font-style: normal;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 21px;
                    color: #999898;
                }
                .log {
                    width: 100%;
                    margin-top: 24px;
                }
                .accout {
                    text-align: center;
                    font-style: normal;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 21px;
                    color: #999898;
                    margin-top: 13px;
                    margin-bottom: 26px;
                }
            }
            .emilVerify {
                display: flex;
                .btn {
                    height: 100%;
                    width: 106px;
                }
            }
            // 链接
            .clause:hover {
                color: rgb(64, 158, 255);
            }
        }

        .hts {
            width: 375px;
            background: #ffffff;
            border: 1px solid #e7e7e7;
            border-radius: 5px;
        }
        .price {
            margin: 23px auto 0px;
            .log-c {
                display: flex;
                align-items: center;
                // justify-content: center;
                width: 342px;
                height: 56px;
                margin: 0 auto 24px;
            }
            .log-d {
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 54px;
                margin-right: 40px;
            }
            .imgs {
                width: 33px;
                height: 33px;
                display: inline-block;
                margin-right: 10px;
            }
            .contxt {
                display: inline-block;
                font-style: normal;
                font-weight: 500;
                font-size: 20px;
                line-height: 30px;
                color: #161616;
                margin-left: 19px;
            }
            .colorblue {
                color: #5499f5 !important;
            }
        }

        // 钱包登录页面
        .login_email {
            width: 700px;
            height: 445px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ffffff;
            border-radius: 10px;
            .money_title {
                font-size: 30px;
                height: 100px;
                line-height: 100px;
            }
            .money_content {
                display: flex;
                flex-direction: column;

                width: 561px;
                height: 271px;
                border: 1px solid #e7e7e7;
                border-radius: 10px;
                margin: 0 auto;

                .money-bg {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    width: 100%;
                    padding: 0 16px;
                    box-sizing: border-box;
                }
                .imgs {
                    width: 33px;
                    height: 33px;
                    display: inline-block;
                    margin-right: 10px;
                    vertical-align: middle;
                }
                .metamsk {
                    display: flex;
                    // border: 1px solid;
                    justify-content: space-between;
                    flex: 1;
                    align-items: center;
                    .money_btn1 {
                        background-color: #3772ff;
                        width: 76px;
                        height: 30px;
                        border-radius: 10px;
                        border: none;
                        color: #ffffff;
                    }
                    .money_btn2 {
                        background-color: #e1e1e1;
                        width: 76px;
                        height: 30px;
                        border-radius: 10px;
                        border: none;
                        color: #707a83;
                    }
                }
                .money-bg:hover {
                    background: rgb(183, 213, 235);
                }
                .metamsk-bor {
                    border-top: 1px solid #e7e7e7;
                }
            }
        }
    }
}
</style>
